<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta c>
  <style>
    div{
      width: 300px;height: 100px;
      display: flex;
      flex-direction: row;
      align-items: center;
      align-content: center;
      justify-content: center;
      margin: auto;
    }
  </style>
</head>
<body>
<div>
    <form action="/common/login" method="post" onsubmit="return login()">
      <label>账号：</label> <input id="username" name="username" type="text"><br>
      <label>密码：</label> <input id="password" name="password" type="password"><br>
      <button type="submit">登陆</button>
    </form>
</div>
<center style="color: red">
    <h6 class="msg" th:text="${msg}"></h6>
    <h6 class="msg">[[${msg}]]</h6>
</center>

<script>
    function login() {
        var username=document.getElementById('username');
        var password=document.getElementById('password');

        if(username.value.trim().length==0){
            //alert('请输入账号！');
            showmsg('请输入账号！')
            username.focus();
            return false;
        }

        if(password.value.trim().length==0){
            //alert('请输入密码！');
            showmsg('请输入密码！')
            password.focus();
            return false;
        }

        if(username.value.trim().length<3 || username.value.trim().length>8){
            //alert('请输入账号！');
            showmsg('账号长度在3至8个字符之间！')
            username.focus();//让文本框获取焦点
            username.select();//选中当前文本框的内容
            return false;
        }
        return true;
    }

    function showmsg(msg) {
        var msgArray=document.getElementsByClassName('msg');
        for (var i = 0; i < msgArray.length; i++) {
            msgArray[i].innerHTML=msg;
        }
    }
</script>
</body>
</html>
